<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show-before="false">
        <template v-slot:after>
          <el-button
            size="medium"
            type="primary"
            @click="addPermissionFn(1,'0')"
          >新增权限
          </el-button>
        </template>
      </PageTools>
      <!-- 表格 -->
      <el-table border :data="permissionList" row-key="id">
        <el-table-column label="名称" prop="name" align="center" />
        <el-table-column label="标识" prop="code" align="center" />
        <el-table-column label="描述" prop="description" align="center" />
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button v-if="row.type==1" type="text" @click="addPermissionFn(2,row.id)">添加</el-button>
            <el-button type="text" @click="updatePerssionFn(row.id)">编辑</el-button>
            <el-button type="text" @click="delPermissionFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增权限弹窗 -->
      <el-dialog :title="formData.id ? '编辑权限' : '新增权限' " :visible="showDialog" @close="closeFn">
        <el-form
          ref="form"
          label-width="120px"
          :model="formData"
          :rules="rules"
        >
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="开关">
            <!-- "1" 表示开启 "0" 表示关闭 -->
            <el-switch
              v-model="formData.enVisible"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-row type="flex" justify="center">
            <el-button size="small" type="primary" @click="confirmFn()">确定</el-button>
            <el-button size="small" @click="closeFn">取消</el-button>
          </el-row>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionList, addPermission, delPermission, updatePermission, getPermissionDetail } from '@/api/permission'
import { listToTree } from '@/utils/index'
export default {
  data() {
    return {
      // 权限列表
      permissionList: [],
      // 新增弹窗
      showDialog: false,
      // 新增表单
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: 1, // 类型 该类型 是后台规定，无需渲染，type值为1，表示添加1级权限
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      },
      // 新增表单校验
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blue' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blue' }],
        description: [{ required: true, message: '权限描述不能为空', trigger: 'blue' }]
      }
    }
  },

  created() {
    /* 列表渲染 */
    this.getPermission()
  },

  methods: {
    /* 获取列表渲染 */
    async getPermission() {
    /* 渲染权限列表*/
      // 1. 获取所有权限点
      const res = await getPermissionList()
      // 2. 处理为树形结构
      this.permissionList = listToTree(res, '0')
      console.log(this.permissionList)
    },

    /*  新增权限--控制显示*/
    addPermissionFn(type, pid) {
      // 1 .显示弹窗
      this.showDialog = true
      // 2 .设置type为一级节点
      this.formData.type = type
      // 3. 设置pid为0 （0属于一级节点）
      this.formData.pid = pid
    },

    /* 确认新增权限 */
    async confirmFn() {
      // 1. 校验
      await this.$refs.form.validate()
      // 2.判断是新增还是编辑
      if (!this.formData.id) {
        // 2.1 调用提交新增接口
        await addPermission(this.formData)
      } else {
        // 2.2 调用编辑接口
        await updatePermission(this.formData)
      }
      // 3. 重新渲染
      this.getPermission()
      // 4. 执行关闭
      this.closeFn()
    },

    /* 关闭新增弹窗 */
    closeFn() {
      // 1.关闭
      this.showDialog = false
      // 2.清空表单
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 是后台规定，无需渲染，type值为1，表示添加1级权限
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      }
      // 3.重置表单和校验
      this.$refs.form.resetFields()
    },

    /* 编辑权限 */
    async updatePerssionFn(id) {
      // 1.控制弹窗显示
      this.showDialog = true
      // 2. 获取id详细信息回显
      this.formData = await getPermissionDetail(id)
    },

    /* 删除权限 */
    delPermissionFn(id) {
      this.$confirm('确认删除?', '删除权限', {
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await delPermission(id)
        // 重新渲染
        this.getPermission()
      }).catch((error) => {
        console.log('取消或删除失败', error)
      })
    }
  }

}
</script>

<style>
.el-table{
  margin-top: 20px; ;
}
</style>
